<template>
  <div class="header">
    <!--左上Logo-->
    <div class="logo" :class="{ 'is-active': isActive }">
      <img src="/static/img/common/litulogo.png" height="38px" />
    </div>

    <div class="navbar">
      <div class="navpnl menuBtn" :class="{ 'is-active': isActive }" @click="handleMenu">
        <span :class="menuBtn"></span>
      </div>
      <div class="navpnl systitle">
        <span>励图开发框架</span>
      </div>

      <!-- 退出登录 -->
      <div class="navpnl logout" @click="logout">
        <span class="el-icon-switch-button"></span>
        <span>退出</span>
      </div>
      <!-- 个人信息 -->
      <div class="navpnl usermsg">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link" style="color: #999">
            <span class="el-icon-user"></span>
            <span>{{ nowUserName }}</span>
            <i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="editUserMsg">个人信息</el-dropdown-item>
            <el-dropdown-item command="editPassword">修改密码</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 消息提醒 -->
      <div class="navpnl badegDiv">
        <el-popover placement="bottom" width="300" trigger="click">
          <div class="poppnl" style="width: 100%">
            <div class="popitem" v-for="item in popmsgList" :key="item.id">
              <b>{{ item.title }}</b>&nbsp;
              <span>{{ item.content }}</span>
            </div>
            <div class="popbtn">
              <el-button size="mini" @click="popmsgAllClick" type="text">查看全部</el-button>
            </div>
          </div>
          <!-- 消息的按钮 -->
          <el-button type="text" slot="reference">
            <el-badge :value="popmsgList.length" :max="99" class="item">
              <i class="el-icon-bell" style="font-size: 18px; color: #00284d"></i>
            </el-badge>
          </el-button>
        </el-popover>
      </div>
    </div>

    <!--个人信息修改-->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" class="dialogForm" title="个人信息修改" v-if="dialogVisibleUserMsg" :visible.sync="dialogVisibleUserMsg" width="700px" :before-close="handleClose">
      <div class="line"></div>
      <el-form :ref="refUserMsgForm" :model="formParamUserMsg" :rules="formParamRulesUserMsg" label-width="110px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="用户帐号" prop="account">
              <el-input size="small" v-model="formParamUserMsg.account" name="account" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="姓名" prop="name">
              <el-input size="small" v-model="formParamUserMsg.name" name="name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="formParamUserMsg.sex" name="sex">
                <el-radio label="">未知</el-radio>
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="手机号" prop="phone">
              <el-input size="small" v-model="formParamUserMsg.phone" name="phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="邮件" prop="email">
              <el-input size="small" v-model="formParamUserMsg.email" name="email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="微信" prop="wechat">
              <el-input size="small" v-model="formParamUserMsg.wechat" name="wechat"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="生日" prop="birthday">
              <el-date-picker v-model="formParamUserMsg.birthday" value-format="yyyy-MM-dd" style="width: 100%" size="small" type="date" name="signTime" placeholder="请选择生日"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="formBtn">
        <el-button size="small" type="primary" @click="editUserMsgSubmit()">确定</el-button>
        <el-button size="small" @click="dialogVisibleUserMsg = false">取消</el-button>
      </div>
    </el-dialog>

    <!-- 修改密码 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" class="dialogForm" title="修改密码" :visible.sync="dialogVisiblePwd" width="400px" :before-close="handleClose">
      <div class="line"></div>
      <el-form :ref="refPasswordForm" :model="formParamPwd" :rules="formParamRulesPwd" label-width="80px">
        <el-form-item label="原密码" prop="oldpwd">
          <el-input size="small" v-model="formParamPwd.oldpwd" show-password style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pwd">
          <el-input size="small" v-model="formParamPwd.pwd" show-password style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmpwd">
          <el-input size="small" v-model="formParamPwd.confirmpwd" show-password style="width:200px"></el-input>
        </el-form-item>
      </el-form>
      <div class="formBtn">
        <el-button size="small" type="primary" @click="editPswSubmit()">确定</el-button>
        <el-button size="small" @click="dialogVisiblePwd = false">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    inject: ["reload"],
    name: "Header",
    data() {
      var that = this;
      // 获取当前登录的用户信息
      let nowUser = this.$storage.getUser();

      return {
        tableMaxHeight: 0, //表格的最大高度
        menuBtn: "el-icon-s-fold",
        // 顶部显示的用户信息
        nowUserName: nowUser.name,

        // 消息提醒的列表
        popmsgList: [],

        // 个人信息修改
        dialogVisibleUserMsg: false,
        refUserMsgForm: "userMsgForm",
        formParamRulesUserMsg: {
          name: [
            { required: true, message: "请输入用户名称", trigger: "blur" },
          ],
        },
        formParamUserMsg: {
          id: "", // 主键
          account: "", // 用户帐号
          name: "", // 姓名
          photo: "", // 头像
          sex: "", // 性别
          wechat: "", // 微信
          phone: "", // 联系方式
          email: "", // 邮件
          birthday: "", // 生日
          deptId: "", // 部门
          post: "", // 岗位
          remark: "", // 备注
        },
        formParamDefaultUserMsg: {
          id: "", // 主键
          account: "", // 用户帐号
          name: "", // 姓名
          photo: "", // 头像
          sex: "", // 性别
          wechat: "", // 微信
          phone: "", // 联系方式
          email: "", // 邮件
          birthday: "", // 生日
          deptId: "", // 部门
          post: "", // 岗位
          remark: "", // 备注
        },

        // 密码修改修改
        dialogVisiblePwd: false,
        refPasswordForm: "pwdForm",
        formParamRulesPwd: {
          oldpwd: [
            { required: true, message: "请填写原密码", trigger: "change" },
          ],
          pwd: [
            { required: true, message: "请填写新密码", trigger: "change" },
          ],
          confirmpwd: [
            { required: true, message: "请输入确认密码", trigger: "change" },
          ],
        },
        formParamPwd: {
          oldpwd: "", //原密码
          pwd: "", //新密码
          confirmpwd: "", // 确认新密码
        },

      };
    },
    computed: {
      isActive() { // 如果左侧菜单打开，则旋转btn180度
        return !this.$store.getters.sidebar.opened;
      },
    },
    mounted() {},
    methods: {
      // 切换菜单部分的收起还是展开
      handleMenu() {
        this.$store.dispatch("ToggleSideBar");
      },

      // 用户下拉列表的数据信息
      handleCommand(command) {
        if (command == "editPassword") {
          this.editPassword();
        } else if (command == "editUserMsg") {
          this.editUserMsg();
        }
      },

      /*TODO 以下为提醒消息的方法  */
      // 提醒消息的方法
      refresh() {
        let that = this;
        var param = new FormData();
        param.append("curPage", 1);
        param.append("pageSize", 20);
        // param.append("status", this.searchParam.status);
        // that.$req.post(param, api.home_stNotify_ownPage, function(_r) {
        //   that.pageTotal = _r.data.total;
        // });
      },
      popmsgAllClick() {
        this.table = true;
        // this.refresh();
      },

      /* 以下为修改个人信息的方法 */
      // 打开修改个人信息界面
      editUserMsg() {
        let that = this;
        var param = new FormData();
        var user = that.$storage.getUser();
        param.append("id", user.id);
        this.$req.get(param, api.urlSysUserDetail, function(_r) {
          that.formParamUserMsg = that.$util.clone_str(_r.data);
          that.dialogVisibleUserMsg = true;
        });
      },
      // 提交修改用户信息
      editUserMsgSubmit() {
        var that = this;
        var param = this.$util.formData(this.formParamUserMsg, this.formParamDefaultUserMsg);
        this.$req.postForm(that.$refs[that.refUserMsgForm], param, api.urlSysUserUpdate, function(_r) {
          that.$util.notify.success("修改成功！");
          that.dialogVisibleUserMsg = false;
          that.refreshNowUser();
        });
      },
      // 修改个人信息后，调整缓存的用户信息
      refreshNowUser() {
        let that = this;
        var param = new FormData();
        var nowUser = that.$storage.getUser();
        param.append("id", nowUser.id);
        this.$req.get(param, api.urlSysUserDetail, function(_r) {
          that.nowUserName = _r.data.name;
          //TODO 更新缓存中信息。
        });
      },

      /* 以下为修改密码的方法 */
      // 密码修改弹窗
      editPassword() {
        this.formParamPwd.oldpwd = "";
        this.formParamPwd.pwd = "";
        this.formParamPwd.confirmpwd = "";
        this.dialogVisiblePwd = true;
      },
      editPswSubmit() {
        var that = this;
        if (this.formParamPwd.pwd != this.formParamPwd.confirmpwd) {
          that.$util.notify.error("确认密码输入不一致！");
          return;
        }
        var param = new FormData();
        param.append("oldPwd", that.$md5(that.formParamPwd.oldpwd));
        param.append("newPwd", that.$md5(this.formParamPwd.pwd));
        this.$req.postForm(that.$refs[that.refPasswordForm], param, api.urlSysUserModifyPwd, function(_r) {
          that.$util.notify.success("密码修改成功！");
          that.dialogVisiblePwd = false;
        });
      },

      //退出登录
      logout() {
        var that = this;
        this.$util.msgbox.confrim("是否退出账户?", function() {
          var token = that.$util.clone_str(that.$storage.getToken());

          that.$store.dispatch("bindLogout", {
            token: token,
            callback: function(type) {
              location.reload();
            },
          });
        });
      },

      // 窗口关闭，通用的方法
      handleClose(done) {
        done();
      },
    },
  };
</script>

<style scoped lang="scss">
  /* 顶部所有按钮的样式 */
  .header {
    width: 100%;
    height: 50px;
    display: flex;
    background: #fff;
    border-bottom: 1px solid #ccc;

    /* 左侧菜单上方logo的样式 */
    .logo {
      width: 199px;
      height: 50px;
      line-height: 50px;
      background: #00284d;
      color: #fff;
      font-size: 18px;
      transition: 0.4s ease;

      &.is-active {
        width: 63px;
        overflow: hidden;
      }

      img {
        margin: 1px;
        vertical-align: middle;
      }
    }

    /** 右侧顶部区域样式 **/
    .navbar {
      flex: 1;
      color: #252b3a;
      position: relative;

      /* 通用设定 */
      .navpnl {
        height: 50px;
        line-height: 50px;

        span {
          font-size: 14px;
          line-height: 50px;
          font-family: PingFang SC;
          font-weight: 300;
          color: #00284d;
        }
      }

      /* 左侧按钮 */
      .menuBtn {
        float: left;
        margin-left: 10px;
        cursor: pointer;
        transition: 0.4s ease;

        &.is-active {
          transform: rotateY(180deg);
        }

        span {
          font-size: 28px;
        }
      }

      /* 左侧标题 */
      .systitle {
        float: left;
        margin-left: 5px;

        span {
          font-size: 18px;
          color: #222222;
          font-weight: 500;
        }
      }

      /* 右侧退出 */
      .logout {
        float: right;
        width: 80px;
        background: rgba(243, 248, 255, 1);
        cursor: pointer;
      }

      /* 右侧用户信息 */
      .usermsg {
        float: right;
        text-align: right;
        margin-right: 5px;
      }

      /* 右侧消息按钮 */
      .badegDiv {
        float: right;
        margin-right: 20px;
      }
    }
  }

  /* 消息弹出框的样式 */
  .poppnl {
    .popitem {
      padding-bottom: 5px;
      margin-top: 5px;
      border-bottom: 1px solid #eee;
      position: relative;
    }

    .popbtn {
      text-align: center;
    }
  }

  /* 顶部logo的自适应 */
  @media all and (max-width: 768px) {
    .header .logo.is-active {
      width: 0;
      overflow: hidden;
    }
  }
</style>

<style lang="scss">
  /* 其他通用样式 */
  .dialogForm {
    @include dialogForm;
  }
</style>